<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <style>
    	body{
    		
    	}
    	
    	 .content li {
            padding-bottom: 10px;
            margin: 10px;
            border-bottom: 1px solid #D8D8D8;
        }
        
        .item, .text {
            display: -webkit-box;
        }
        
        .img {
            width: 80px;
            height: 80px;
        }
        
        img {
            width: 100%;
            display: block;
        }
        
        .text {
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            margin: 0 5px;

        }
        
        .text-price {
            padding: 2px 0;
        }

        .new-price {
            font-size: 20px;
            color: #ff7c70;
            font-family: Impact, Arail, sans-serif;
            font-weight: bold;
        }
        
        .text-price del, .icon-heart {
            margin-left: 15px;
        }
        
        .text-price del, .icon-people + span, .icon-heart + span {
            color: #8c8c8c;
            font-size: 10px;
        }
        
        .icon {
            background-size: 12px;
            background-position: center center;
            background-repeat: no-repeat no-repeat;
            display: inline-block;
            height: 12px;
            width: 12px;
        }
        
        .icon-people {
            background-image: url("../../image/dock_icon_my_tuniu@2x.png");
        }

        .icon-heart {
            background-image: url("../../image/heart@2x.png");
        }
        
        .banner {
		    position: relative;
		    width: 100%;
		    overflow: hidden;
		}
		
		.lable {
		    background-image: -webkit-linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
		    background-image: linear-gradient(top, rgba(59, 59, 59, .6), rgba(27, 27, 27, .6), rgba(50, 50, 50, .4), rgba(31, 31, 31, .4));
		    position: absolute;
		    left: 0;
		    bottom:0;
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    padding-left: 20px;
		    display: block;
		    color: #fff;
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		}
		
		.base-info, .custorm, .productFeature, .journey-detail, .notice-question {
		    position: relative;
		    background: #fff;
		    margin: 10px 0;
		    padding: 0 10px;
		    border-top: 1px solid #d8d8d8;
		    border-bottom: 1px solid #d8d8d8;
		}
		
		.base-info {
		    padding-top: 10px;
		    margin-top: 0;
		}
		
		.title {
		    border-bottom: 1px solid #EDEDED;
		}
		
		.title span {
		    color: #A4A4A4;
		    font-size: 12px;
		    line-height: 18px;
		}
		
		.title span:first-child {
		    color: #000000;
		    font-size: 15px;
		}
		
		.price {
		    margin: 5px 0;
		    line-height: 20px;
		    font-size: 13px;
		}
		
		.price div, .price-text {
		    color: #f99d1c;
		    font-size: 14px;
		}
		
		.price-text {
		    font-size: 16px;
		}
		
		.reserve {
			margin:20px;
			width:50px;
			height:30px;
			background-color:#FFBE00;
			border-radius:2px;
			line-height:30px;
			text-align:center;
			color:#fff
		}
		input {
			color: #FFFFFF;
		}
    </style>
</head>
<body>
    <div class="header" id="header" style="">
       	<div class="back btn" style="position:absolute;color: #CCFF00;" tapmode="" onclick="api.closeWin()"></div>
      	<div class="hotelRooms">
        <div class="title" id="title"></div>
       <!--  <div class="bell btn" tapmode="" onclick="bell()"></div>
        <div class="dock btn" tapmode="" onclick="menu()"></div> -->
   		</div>
    </div>
<div class="banner">
    <div class="lable">...</div>
</div>
<div class="base-info">
    <div class="title">
        <span>正熙国际酒店（成都春熙太古里店）</span>
    </div>
    <div class="price">
        <div class="">促销价:<span class="price-text">￥317</span>起
            <del>￥359</del>
        </div>
        <table class="" id="" style="width: 100%;height: 100px;">
        	<thead>
        		<tr>
        			<td style="width: 50%;">成都 锦江区 红星路三段16号 ，地铁2号线春熙站出口50米，毗邻IFS，太古里，王府井百货。</td>
        			<td style="width: 50%;"></td>
        		</tr>
        	</thead>
        </table>
        
    </div>
    <div>
    	
    </div>
</div>
	<div>
	<ul class="content">
    <li tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-1.jpg">
            </div>
            <div class="text">
                <div class="text-title" id="type1">标准双床房 </div>
                <div class="text-price">
                    <span class="new-price">￥317</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
            	<input type="button" value="预定" id="bookRoom"/>
            </div>
        </div>
    </li>
    <li tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-2.jpg">
            </div>
            <div class="text">
                <div class="text-title">恋家智慧房</div>
                <div class="text-price">
                    <span class="new-price">￥317</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
           		<input type="button" value="预定" id="bookRoom"/>
            </div>
        </div>
    </li>
    <li tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-3.jpg">
            </div>
            <div class="text">
                <div class="text-title">行政套房</div>
                <div class="text-price">
                    <span class="new-price">￥317</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
          		<input type="button" value="预定" id="bookRoom"/>
            </div>
        </div>
    </li>
    <li tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-4.jpg">
            </div>
            <div class="text">
                <div class="text-title">豪华套房</div>
                <div class="text-price">
                    <span class="new-price">￥317</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
           		<input type="button" value="预定" id="bookRoom"/>
            </div>
        </div>
    </li>
     <li  tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-1.jpg">
            </div>
            <div class="text">
                <div class="text-title">标准大床房</div>
                <div class="text-price">
                    <span class="new-price">￥3179</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
            	<input type="button" value="预定" id="bookRoom"/>
            </div>
        </div>
    </li>
    <li tapmode="">
        <div class="item" onclick="toDetail()">
            <div class="img">
                <img src="../../image/tour-2.jpg">
            </div>
            <div class="text">
                <div class="text-title">豪华家庭套房</div>
                <div class="text-price">
                    <span class="new-price">￥3179</span>
                    <del>原价￥359</del>
                </div>
                <div class="text-label">
                    <i class="icon icon-people"></i>
                    <span>免费wifi</span>
                    <i class="icon icon-heart"></i>
                    <span>96%满意</span>
                </div>
            </div>
            <div class="reserve">
            	<input type="button" id="bookRoom" value="预定"/>
            </div>
        </div>
    </li>
</ul>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../resource/jquery-1.js"></script>
<script type="text/javascript">
	apiready = function(){
		
		var baiduMap = api.require('baiduMap');
			baiduMap.open({
			    x: 200,
			    y: 260,
			    w: 140,
			    h: 100
			}, function(ret, err) {
			    if (ret.status) {
			        
			    } else {
			        alert(JSON.stringify(err));
			    }
			});
			var baiduMap = api.require('baiduMap');
			baiduMap.startLocation({
			    accuracy: '100m',
			    filter: 1,
			    autoStop: true
			}, function(ret, err) {
			    if (ret) {
			       
			    } else {
			        alert(JSON.stringify(err));
			    }
			});
			var baiduMap = api.require('baiduMap');
			baiduMap.setZoomLevel({
			    level: 3
			});
			var baiduMap = api.require('baiduMap');
			baiduMap.setOverlook({
			   overlook: -10
			});
			var baiduMap = api.require('baiduMap');
			baiduMap.showUserLocation({
			    isShow: true,
			    trackingMode: 'none'
			});

	};
	
	$('#floor8').click(function(e){
		api.openWin({
	        name: '预定信息',
	        url: './bookHotel.html'
        });
        e.stopPropagation();
	});
	function toDetail(){
	 var width = document.documentElement.clientWidth;
	 var height = document.documentElement.clientHeight;
		api.openFrame({
		    name: '详情',
		    url: './order.html',
		    rect: {
			    x:0,
			    y:250,
			    w:width,
			    h:height-250
		    },
	    });
		
	}
	
	
	

</script>
</html>